<template>
  <div class="course-list-page">
    <div class="lecturer-header bg-white border-b">
      <div class="">
        <div class="flex items-start gap-6">
          <div class="relative flex-shrink-0">
            <n-avatar
              circle
              :size="200"
              :src="lecturerInfo?.user?.avatar"
              class="w-30 h-30 rounded-full object-cover border-4 border-white shadow-lg"
            />
            <!--            <img-->
            <!--              :src="lecturerInfo?.user?.avatar"-->
            <!--              alt="教师头像"-->
            <!--              class="w-30 h-30 rounded-full object-cover border-4 border-white shadow-lg"-->
            <!--            />-->
            <div
              class="absolute -bottom-1 -right-1 w-6 h-6 bg-green-500 border-2 border-white rounded-full"
            ></div>
          </div>

          <div class="flex-1 min-w-0">
            <div class="flex items-center gap-3 mb-2">
              <div class="text-2xl text-gray-900">{{ lecturerInfo.realName }}</div>
              <div
                class="flex items-center gap-1 px-3 py-1 bg-amber-50 border border-amber-200 rounded-full"
              >
                <Shield class="w-4 h-4 text-amber-600" />
                <span class="text-sm font-medium text-amber-700">天津大学教授认证</span>
              </div>
            </div>

            <div class="flex flex-wrap items-center gap-4 mb-4">
              <span class="inline-flex items-center gap-1 text-gray-600">
                <GraduationCap class="w-4 h-4" />
                计算机科学与技术教授
              </span>
              <span class="inline-flex items-center gap-1 text-gray-600">
                <MapPin class="w-4 h-4" />
                天津大学
              </span>
              <span class="inline-flex items-center gap-1 text-gray-600">
                <Calendar class="w-4 h-4" />
                从教15年
              </span>
            </div>

            <p class="text-gray-700 leading-relaxed mb-4 max-w-3xl">
              天津大学计算机科学与技术系教授，博士生导师。主要研究方向为人工智能、机器学习和深度学习。
              发表SCI论文80余篇，主持国家自然科学基金重点项目3项，获得国家科技进步二等奖1项。
            </p>

            <div class="flex items-center gap-8">
              <div class="text-center">
                <div class="flex items-center gap-1 text-red-500 mb-1">
                  <Heart class="w-5 h-5 fill-current" />
                  <span class="text-2xl font-bold">{{ lecturerInfo.totalLike || 0 }}</span>
                </div>
                <span class="text-sm text-gray-500">获得点赞</span>
              </div>
              <div class="text-center">
                <div class="flex items-center gap-1 text-blue-500 mb-1">
                  <BookOpen class="w-5 h-5" />
                  <span class="text-2xl font-bold">{{ lecturerInfo.totalCourses || 0 }}</span>
                </div>
                <span class="text-sm text-gray-500">开设课程</span>
              </div>
              <div class="text-center">
                <div class="flex items-center gap-1 text-green-500 mb-1">
                  <Users class="w-5 h-5" />
                  <span class="text-2xl font-bold">{{ lecturerInfo.totalStudents || 0 }}</span>
                </div>
                <span class="text-sm text-gray-500">学生总数</span>
              </div>
              <!--              <div class="text-center">-->
              <!--                <div class="flex items-center gap-1 text-purple-500 mb-1">-->
              <!--                  <Award class="w-5 h-5" />-->
              <!--                  <span class="text-2xl font-bold">15</span>-->
              <!--                </div>-->
              <!--                <span class="text-sm text-gray-500">获得奖项</span>-->
              <!--              </div>-->
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--    <div class="max-w-6xl mx-auto px-6 py-8">-->
    <!--      <div class="flex items-center gap-2 mb-6">-->
    <!--        <Flame class="w-6 h-6 text-orange-500" />-->
    <!--        <h2 class="text-2xl font-bold text-gray-900">热门课程</h2>-->
    <!--      </div>-->

    <!--      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">-->
    <!--        <div-->
    <!--          v-for="course in hotCourses"-->
    <!--          :key="course.id"-->
    <!--          class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow"-->
    <!--        >-->
    <!--          <img :src="course.image" :alt="course.title" class="w-full h-48 object-cover" />-->
    <!--          <div class="p-6">-->
    <!--            <div class="flex items-center gap-2 mb-2">-->
    <!--              <span class="px-2 py-1 bg-orange-100 text-orange-700 text-xs font-medium rounded-full"-->
    <!--                >热门</span-->
    <!--              >-->
    <!--              <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded-full">{{-->
    <!--                course.category-->
    <!--              }}</span>-->
    <!--            </div>-->
    <!--            <h3 class="font-semibold text-gray-900 mb-2">{{ course.title }}</h3>-->
    <!--            <p class="text-gray-600 text-sm mb-4">{{ course.description }}</p>-->
    <!--            <div class="flex items-center justify-between">-->
    <!--              <div class="flex items-center gap-4 text-sm text-gray-500">-->
    <!--                <span class="flex items-center gap-1">-->
    <!--                  <Users class="w-4 h-4" />-->
    <!--                  {{ course.students }}-->
    <!--                </span>-->
    <!--                <span class="flex items-center gap-1">-->
    <!--                  <Star class="w-4 h-4 fill-current text-yellow-400" />-->
    <!--                  {{ course.rating }}-->
    <!--                </span>-->
    <!--              </div>-->
    <!--              <span class="text-lg font-bold text-blue-600">{{ course.price }}</span>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->

    <div class="mx-auto">
      <div class="flex items-center justify-between my-6">
        <h2 class="text-2xl font-bold text-gray-900">全部课程</h2>
        <div class="flex items-center gap-4">
          <!--          <select-->
          <!--            v-model="selectedCategory"-->
          <!--            class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"-->
          <!--          >-->
          <!--            <option value="all">全部分类</option>-->
          <!--            <option value="人工智能">人工智能</option>-->
          <!--            <option value="机器学习">机器学习</option>-->
          <!--            <option value="深度学习">深度学习</option>-->
          <!--            <option value="数据科学">数据科学</option>-->
          <!--          </select>-->
        </div>
      </div>
      <div class="courses-grid">
        <div
          v-for="course in dataList"
          :key="course.id"
          class="course-card"
          @click="viewCourse(course.courseId)"
        >
          <div class="course-image">
            <img v-if="course.coverUrl" :src="course.coverUrl" :alt="course.title" />
            <div v-else class="h-48 no-image">
              <span>{{ course.title }}</span>
            </div>
            <div class="course-badge" v-if="course.isHot">🔥 热门</div>
            <div class="course-level">{{ course.level }}</div>
          </div>
          <div class="course-content">
            <h3 class="course-title">{{ course.title }}</h3>
            <p class="course-description">{{ course.description }}</p>
            <div class="course-meta">
              <!--            <div class="instructor">-->
              <!--              <img-->
              <!--                :src="course.instructor.avatar"-->
              <!--                :alt="course.instructor.name"-->
              <!--                class="instructor-avatar"-->
              <!--              />-->
              <!--              <span>{{ course.instructor.name }}</span>-->
              <!--            </div>-->
              <div class="course-stats">
                <span class="rating">⭐ {{ course.rating }}</span>
                <span class="students">{{ course.viewCount }}人学习</span>
              </div>
            </div>
            <div class="course-footer">
              <div class="course-price">
                <span class="current-price">¥{{ course.price }}</span>
                <span v-if="course.originalPrice" class="original-price"
                  >¥{{ course.originalPrice }}</span
                >
              </div>
              <div class="course-type">{{ course.type }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="flex justify-center margin-top-20">
        <n-pagination v-model:page="pageNum" :page-count="pages" :on-update:page="pageUpdate" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { getLecturerDetailApi, getLecturerCourseList } from '@/api/lecturer';
  import { ref, computed, watch, nextTick } from 'vue';
  import {
    Heart,
    BookOpen,
    Users,
    Award,
    Star,
    Flame,
    ChevronLeft,
    ChevronRight,
    Shield,
    GraduationCap,
    MapPin,
    Calendar,
  } from 'lucide-vue-next';
  import { useRoute, useRouter } from 'vue-router';

  const route = useRoute();
  const router = useRouter();

  const lecturerId = ref<any>('');
  const lecturerInfo = ref<any>({});

  watch(
    () => route.query,
    async (newParams) => {
      if (newParams.id) {
        lecturerId.value = newParams.id;
        await nextTick();
        getLecturerDetail();
        loadData();
      }
    },
    { immediate: true }
  );

  async function getLecturerDetail() {
    try {
      const data: any = await getLecturerDetailApi(lecturerId.value);
      lecturerInfo.value = data;
    } catch (e) {
      console.log('课程详情加载失败');
    }
  }

  function viewCourse(courseId: any) {
    router.push({
      name: 'Video', // 使用路由名称
      query: {
        courseId: courseId,
      },
    });
  }

  // 分页参数
  const pageNum = ref(1);
  const pageSize = 10;
  const loading = ref(false);
  const isLastPage = ref(false);
  const pages = ref(0);
  const dataList = ref<any[]>([]);

  function handleSearch() {
    resetPage();
    loadData();
  }

  async function loadData() {
    if (loading.value || isLastPage.value) return;

    loading.value = true;
    try {
      const params = {
        pageNum: pageNum.value,
        pageSize: pageSize,
        lecturerId: lecturerId.value,
      };

      const data: any = await getLecturerCourseList(params);
      dataList.value = data.records || [];
      pages.value = data.pages;
      if (dataList.value.length < 10) {
        isLastPage.value = true;
      }
    } catch (error) {
      console.error('error:', error);
    } finally {
      loading.value = false;
    }
  }

  function resetPage() {
    pageNum.value = 1;
    isLastPage.value = false;
    dataList.value = [];
  }

  function pageUpdate(num: any) {
    pageNum.value = num;
    loadData();
  }

  const hotCourses = ref([
    // {
    //   id: 1,
    //   title: '深度学习基础与实践',
    //   description: '从零开始学习深度学习，包含理论基础和实际项目',
    //   category: '深度学习',
    //   students: '2.1k',
    //   rating: '4.9',
    //   price: '¥299',
    //   image: bg1,
    // },
    // {
    //   id: 4,
    //   title: '自然语言处理入门',
    //   description: '学习NLP基础理论和实际应用',
    //   category: '人工智能',
    //   students: '1.2k',
    //   rating: '4.6',
    //   price: '¥249',
    //   image: bg1,
    //   isNew: true,
    // },
  ]);
</script>

<style lang="less" scoped>
  .course-list-page {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .lecturer-header {
    padding: 20px;
    border-radius: 10px;
  }

  /* 课程网格 */
  .courses-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 40px;
  }

  .course-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
    cursor: pointer;
  }

  .course-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }

  .course-image {
    position: relative;
    height: 180px;
    overflow: hidden;
  }

  .course-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .course-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(255, 69, 0, 0.9);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
  }

  .course-level {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
  }

  .course-content {
    padding: 16px;
  }

  .course-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 8px;
    line-height: 1.4;
  }

  .course-description {
    color: #718096;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .course-meta {
    margin-bottom: 12px;
  }

  .instructor {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }

  .instructor-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
  }

  .instructor span {
    font-size: 14px;
    color: #4a5568;
  }

  .course-stats {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #718096;
  }

  .course-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .course-price {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .current-price {
    font-size: 1.1rem;
    font-weight: 600;
    color: #e53e3e;
  }

  .original-price {
    font-size: 14px;
    color: #a0aec0;
    text-decoration: line-through;
  }

  .course-type {
    font-size: 12px;
    color: #3182ce;
    background: #ebf8ff;
    padding: 4px 8px;
    border-radius: 12px;
  }

  /* 响应式设计 */
  @media (max-width: 1024px) {
    .courses-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (max-width: 768px) {
    .courses-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
    }

    .filter-group {
      flex-direction: column;
      gap: 10px;
    }

    .filter-label {
      min-width: auto;
    }

    .results-header {
      flex-direction: column;
      gap: 10px;
      align-items: flex-start;
    }
  }

  .no-image {
    //background: linear-gradient(135deg, #6a89cc 0%, #4a69bd 100%);
    background: linear-gradient(135deg, #6dc3ae 0%, #4ab69c 100%);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .no-image .icon-none {
    width: 30px;
    margin-bottom: 15px;
  }

  .no-image span {
    font-size: 1rem;
    font-weight: 500;
  }
</style>
